<template>
	<view class="scan-qrcode-container">
		<view class="header-container">
			<view class="left"></view>
			<view class="center">订单核销</view>
			<view class="right"></view>
		</view>
		<view class="main-container">
			<button class="scan-btn" type="default" @click="openQrcodeCheck">扫码</button>
			<view class="title">{{title}}</view>
		</view>
	</view>
</template>

<script>
	import { token } from "../../util/storage";
	export default {
		data() {
			return {
				title: '等待扫码'
			}
		},
		onLoad() {
			if(!token.get()) {
				uni.navigateTo({
				  url: '/pages/login/index',
				});
			}
		},
		methods: {
			openQrcodeCheck() {
				uni.scanCode({
					success: (result) => {
						this.title = "扫描成功，等待核销";
						uni.request({
							method: "POST",
							url: "http://121.196.25.46:8081/api/order/cancellation/after/verification",
							header: {
								Authorization: token.get()
							},
							data: {
								qrCode: result.result
							},
							success: (result) => {
								if (!/[2][0-9]*/.test(result.data.status_code.toString())) {
									if (result.data.status_code.toString() === "401") {
										uni.showToast({
											title: "登录过期，请重新登录"
										});
										uni.navigateTo({
											url: "/pages/login/index"
										})
									} else if (result.data.status_code.toString() === "10013") {
										this.title = "门票已经使用";
									} else if (result.data.status_code.toString() === "10014") {
										this.title = "未支付订单不能生成二维码";
									} else if (result.data.status_code.toString() === "10015") {
										this.title = "核销人信息未找到";
									} else {
										this.title = "核销失败，请稍后重试";
									}
								} else {
									this.title = "当前订单已核销";
								}
							},
							fail: (error) => {
								this.title = "请求异常" + JSON.stringify(error.response);
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.scan-qrcode-container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.header-container {
	  color: #fff;
	  height: 24px;
	  padding: 15px;
	  padding-top: 40px;
	  flex-shrink: 0;
	  display: flex;
	  background: #129efb;
	}
	
	.header-container .left,
	.header-container .right {
	  font-size: 16px;
	  width: 100px;
	  flex-shrink: 0;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.header-container .center {
	  flex-grow: 1;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.main-container {
	  flex-grow: 1;
	  overflow: auto;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}
	.title {
		color: #808080;
		font-size: 14px;
		width: 100%;
		margin-top: 30px;
		text-align: center;
	}
	.scan-btn {
		font-size: 24px;
		width: 160px;
		height: 160px;
		line-height: 160px;
		border-radius: 80px !important;
		background-color: #129efb !important;
		border: unset;
		color: #ffffff !important;
	}
</style>
